import React, { useEffect, useState } from 'react'
import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Droppable, Draggable, DragDropContextProvider } from '@/plugins/dnd'
import { SimpleUserModel } from '../interface'
import { ListItemGhost } from '../../../components/DndGhost'
import { useUserInteractiveStore } from './store'
import shallow from 'zustand/shallow'
import { useUserStore } from '../store'
import { ActionType, ListBody } from '@/components/List'
import { dealDrop, listOrderClick } from '@/utils/listSlice'
import { DropData } from '@/api/manager/type'
import { UserEntity } from '@/api/create/interface'
import { ListItem } from './item'
import { vipSort2Users } from '../../../store.combine'

interface RowRendererProps extends ListChildComponentProps {
	data: SimpleUserModel[]
}

const rowRenderer = React.memo(({ data: list, index, style }: RowRendererProps) => {
	const rowData = list[index]
	const dataTransfer = {
		data: {
			rowData,
			mt: rowData.mcc,
		},
		from: 'interactive-user',
	}
	return (
		<Draggable
			style={style}
			index={index}
			dataTransfer={dataTransfer}
			ghostRender={<ListItemGhost data={rowData.mcc} />}
		>
			<ListItem {...rowData} />
		</Draggable>
	)
})
export function InteractiveList() {
	const [list, setList] = useState<SimpleUserModel[]>([])

	const { basicList, update } = useUserInteractiveStore(
		(state) => ({ basicList: state.list, update: state.update }),
		shallow
	)

	const disabledIcon = useUserStore((state) => state.keywords !== '')

	useEffect(() => {
		let l = basicList.filter((l) => l.status.isMatchSearch)
		//todo 以前有vip要在前面的逻辑，这个功能先不做了，因为全部终端就没做
		setList(l)
	}, [basicList])

	const handleOrder = (type: ActionType) => {
		const result = listOrderClick(basicList, type)
		update({ list: result })
		vipSort2Users()
	}

	const handleDrop = (dataTransfer: DropData<{ mt: UserEntity }, { rowData?: SimpleUserModel }>, index: number) => {
		if (dataTransfer && dataTransfer.from === 'interactive-user' && !disabledIcon) {
			let _data = dataTransfer.data?.rowData
			if (_data) {
				let result = dealDrop(
					basicList,
					{
						mts: [_data],
						dropIndex: index,
						isOther: false,
					},
					'uuid'
				)
				update({ list: result })
				vipSort2Users()
			}
		}
	}
	return (
		<ListBody _height={95} disabledUp={disabledIcon} disabledDown={disabledIcon} order={handleOrder}>
			<AutoSizer>
				{({ height }) => (
					<DragDropContextProvider>
						<Droppable onDrop={handleDrop} placeholderHeight={40}>
							{(setDroppableRef) => (
								<List
									width={248}
									height={height}
									itemCount={list.length}
									itemSize={40}
									itemData={list}
									outerRef={setDroppableRef}
									itemKey={(index, data) => data[index].uuid}
								>
									{rowRenderer}
								</List>
							)}
						</Droppable>
					</DragDropContextProvider>
				)}
			</AutoSizer>
		</ListBody>
	)
}
